<!DOCTYPE html>
<!-- saved from url=(0038)http://jpress.io/article/category/blog -->
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">
<div id="translate-button" style="background-color: #ffffff;"></div>
<head th:replace="/default/_layout :: head(~{::title})">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>[[${articleview.article.title}]]</title>
    <!-- Styles -->
    <link href="css/page.min.css" th:href="@{/default/css/page.min.css}" rel="stylesheet">
    <link href="css/style.css" th:href="@{/default/css/style.css}" rel="stylesheet">
    <link href="css/new.min.css" th:href="@{/default/css/new.min.css}" rel="stylesheet">
    <link href="css/jp.css" th:href="@{/default/css/jp.css}" rel="stylesheet">
    <link href="css/notification.css" th:href="@{/default/css/notification.css}" rel="stylesheet">
    <link href="css/article.css" th:href="@{/default/css/article.css}" rel="stylesheet">
    <link href="css/comment.css" th:href="@{/default/css/comment.css}" rel="stylesheet">
    <!-- /.Styles-->
    <!-- Favicons -->
    <link rel="apple-touch-icon" href="#">
    <link rel="icon" href="#">
    <script>
        var web = {cpath:''}
        //        window.addEventListener('touchmove', func, { passive: false });
    </script>
</head>
<body data-aos-easing="ease" data-aos-duration="1500" data-aos-delay="0" class="body-scrolled navbar-scrolled">
<!-- menu -->
<nav class="navbar navbar-expand-lg navbar-stick-dark navbar-light" data-navbar="sticky" th:replace="/default/_layout :: menu(1)" >
    <div class="container">
        <div class="navbar-left">
            <button class="navbar-toggler" type="button">☰</button>
            <a class="navbar-brand" href="http://jpress.io/">
                <img class="logo-dark" src="#" alt="logo">
                <img class="logo-light" src="#" alt="logo">
            </a>
        </div>
        <section class="navbar-mobile">
            <ul class="nav-navbar nav ml-auto">
                <li class="nav-item"><a class="nav-link" th:classappend="${n==1} ? 'active'" href="#">首页</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==2} ? 'active'" href="#">社区</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==3} ? 'active'" href="#">案例</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==4} ? 'active'" href="#">模板</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==5} ? 'active'" href="#">企业版</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==6} ? 'active'" href="#">插件</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==7} ? 'active'" href="#">小程序</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==8} ? 'active'" href="#">文档</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==9} ? 'active'" href="#">博客</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==10}? 'active'" href="#">加入VIP</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==11}? 'active'" href="#">官方服务</a></li>
            </ul>
            <div class="nav-download d-inline-flex">
                <a class="nav-link" href="../ucenter/user_login.html" th:href="@{/login}">登录</a>
                <a class="btn" href="../ucenter/user_register.html" th:href="@{/regist}">注册</a>
            </div>
        </section>
    </div>
</nav>
<!-- /.menu -->


<!-- Header -->
<header class="header text-center text-white" th:replace="/default/_layout :: header" style="background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);">
    <div class="container">

        <div class="row">
            <div class="col-md-8 mx-auto">
                <h1>博客</h1>
                <p class="lead-2 opacity-90 mt-6">分享历程，记录经验，积累点滴，实现自我...</p>

            </div>
        </div>

    </div>
</header>
<!-- /.header -->

<!-- Main -->
<main class="main-content">
    <div class="section section-white bg-gray">
        <div class="container">
            <div class="row">


                <div class="col-md-8 col-xl-9">
                    <!--
              |‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
              | Blog content
              |‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
              !-->
                    <div class="section p-20">
                        <div class="artical-title">
                            <h1>[[${articleview.article.title}]]</h1>
                            <p class="text-muted">
                                <span class="mr-20"><i class="el-icon-view"></i> [(${articleview.article.view_count})]</span>
                                <span><i class="el-icon-time"></i> [[${articleview.article.created}]]</span>
                            </p>
                        </div>
                        <div>
                            <div id="app">
                                <div class="demo-image__placeholder">
                                    <div class="block">
                                        <el-image :src="src">
                                            <template #placeholder>
                                                <div class="image-slot">
                                                    加载中<span class="dot">...</span>
                                                </div>
                                            </template>
                                        </el-image>
                                    </div>
                                </div>

                            </div>
                            <script>
                                var Main = {
                                    data() {
                                        return {
                                            src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
                                        }
                                    }
                                }

                            </script>
                        </div>
                        <div>
                            [[${articleview.article.content}]]
                        </div>
                        <div class="gap-xy-2 mt-6"></div>
                    </div>
                    <div class="section p-20">

                        <div class="comment-default-block">

                            <form class="comment-form" action="/article/postComment" id="jpress-comment-form" method="post" autocomplete="off">
                                <input type="hidden" name="articleId" value="158">
                                <input type="hidden" name="render" value="default">
                                <input type="hidden" name="pid" id="comment-pid">

                                <div class="comment-textarea">
                                    <textarea placeholder="我们相信，您的评论能够一针见血...." rows="4" name="content"></textarea>
                                </div>

                                <div class="comment-vcode">
                                    <input placeholder="请输入验证码" name="captcha" id="comment-captcha">
                                    <img class="vcode-img" src="/commons/captcha" onclick="this.src='/commons/captcha?d='+Math.random();" cdn-exclude="" id="comment-vcode">
                                </div>

                                <button type="submit">提交</button>
                                <span class="clearfix"></span>
                            </form>


                            <h4 class="comment-page-title" id="comments">全部评论</h4>

                            <div class="comment-page">

                                <div class="comment-item" th:each="CommentShow:${commentVOList}">

                                    <div class="comment-item-content">
                                        <div class="comment-item-content-item">
                                            <table>
                                                <tr>
                                                    <td>
                                                        <div class="comment-item-portrait"><img src="#" class="img-fluid rounded-circle"></div>
                                                    </td>
                                                    <td>
                                                        <div class="comment-author"><b>[[${CommentShow.userInfo.nickname}]]</b></div>
                                                    </td>
                                                    <td> <!-- 占位TD --> </td>
                                                    <td>
                                                        <div class="comment-time">[[${CommentShow.articleComment.created}]]</div>
                                                    </td>
                                                </tr>
                                            </table>
                                            <div class="comment-item-content-main">
                                                [[${CommentShow.articleComment.content}]]
                                            </div>
                                            <div class="comment-reply-btn">
                                                <a href="javascript:;" data-cid="103" data-author="jean" class="toReplyComment">回复</a>
                                            </div>
                                        </div>
                                    </div>
                                    <span class="clearfix"></span>
                                </div>
                            </div>

                            <nav>
                                <ul class="pagination justify-content-center">
                                    <li class="page-item previous disabled"><a class="page-link" href="javascript:;">上一页</a></li>
                                    <li class="page-item active"><a class="page-link" href="javascript:;">1</a></li>
                                    <li class="page-item next disabled"><a class="page-link" href="javascript:;">下一页</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-xl-3">
                    <!-- SideBar -->
                    <div class="sidebar px-4 py-md-0" th:replace="/default/_layout :: SideBar"></div>
                    <!-- SideBar -->
                </div>
            </div>
        </div>
    </div>
</main>
<!-- ./Main -->

<!-- Footer -->
<footer class="footer py-7" th:replace="/default/_layout :: footer"> </footer>
<!-- /.footer -->


<!-- Scripts -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar"><div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <div class="pswp__preloader"><div class="pswp__preloader__icn">
                    <div class="pswp__preloader__cut"><div class="pswp__preloader__donut"></div>
                    </div>
                </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
            <div class="pswp__caption"><div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>
<th:block th:replace="/default/_layout :: scripts">

</th:block>
</body>
</html>